import React, { Component } from 'react';
import { View, Text } from '@tarojs/components';
import Taro from '@tarojs/taro';
import "./index.less";
interface  props{
     title:any,
}
class Navbar extends Component<props>{
    state = {
        height:0,
        obj:"",
        navBarStyle:{},
        statusStyle:{},
        navStyle:{
            paddingRight:"0px"
        }
    }
    area=Taro.getMenuButtonBoundingClientRect();
    componentDidMount(){
        Taro.getSystemInfo({}).then((res)=>{
            this.setState({
                navBarStyle:{
                    "height":this.area.bottom+(this.area.top-res.statusBarHeight)*2+"px",
                },
                statusStyle:{
                    height:res.statusBarHeight+"px",
                    width:"100%"
                },
                navStyle:{
                    height:this.area.height+(this.area.top-res.statusBarHeight)*2+"px",
                    paddingRight:this.area.width+20+"px"
                }
            });
        })
    }
    renderChild(child){
            if(child.props&&child.props.className.indexOf("right")>-1){
                 child.props.style={
                     left:this.area.left-40
                 };
            }
            return child;
    }
    render(){
        return (
            <View className="navbar" style={this.state.navBarStyle}>
                <View className="appStatus" style={this.state.statusStyle}></View>
                <View className="nav" style={this.state.navStyle}>
                    {
                       Array.isArray(this.props.children)?this.props.children.map(item=>{
                            return this.renderChild(item)
                        }):this.props.children&&this.renderChild(this.props.children)
                     }
                     
                    <View className="title">{this.props.title}</View>
                </View>
            </View>
        )
    }
     
}

export default Navbar
